<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div class="top">
					<h3>商品服务</h3>
					<el-button plain type="primary" v-if="counter.btnsObj.addFlag" @click="dialogFormVisible2= true">{{counter.btnsObj.addName}}</el-button>
				</div>
				<el-form-item label="服务名称" label-width="90">
				  <el-input v-model="form.serviceName" placeholder="请输入服务名称" />
				  <el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
				  <el-button @click="clearContentFn">重置</el-button>
				</el-form-item>
				<el-table :data="tableData" style="width: 100%" height="50vh">
				    <el-table-column prop="serviceName" label="服务名称"/>
				    <el-table-column prop="serviceDescribe" label="描述"/>
					<el-table-column label="操作">
						<template #default="record">
							<a class="mya" @click="modify(record.row)" style="cursor: pointer;">编辑</a>
							<a class="mya" @click="del(record.row)" style="cursor: pointer;" >删除</a>
						</template>
					</el-table-column>
				</el-table>
				  
				  <el-pagination
				  	layout="prev,pager,next"
				  	:page-count="total"
				  	:page-size="pageSize"
				  	v-model:current-page="pageIndex"	
				  	@current-change="changePage"
				  ></el-pagination>
			</el-main>
	    </el-container>
	</div>
	
	
	<!-- 编辑框 -->
	<el-dialog v-model="dialogFormVisible" title="编辑商品服务" width="500">
	    <el-form :model="formdata" label-width="auto">
	      <el-form-item label="服务名称" prop="serviceName" label-width="110">
	        <el-input v-model="formdata.serviceName" 
			 show-word-limit maxlength="20" style="width: 250px;"/>
	      </el-form-item>
		  <el-form-item label="图片" label-width="110">
		  	<el-upload
				v-model="formdata.serviceImage"
		  	    class="avatar-uploader"
		  	    :action="uploadUrl"
		  	    :show-file-list="false"
		  	    :on-success="handleAvatarSuccess"
		  	    :before-upload="beforeAvatarUpload"
		  	  >
		  	    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
		  	    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
		  	  </el-upload>
		  </el-form-item>
		  <el-form-item label="描述"  prop="serviceDescribe" label-width="110">
		    <el-input
		        v-model="formdata.serviceDescribe"
		        style="width: 250px"
		        :autosize="{ minRows: 2, maxRows: 4 }"
		        type="textarea"
		        placeholder="请输入描述"
				show-word-limit
				maxlength="200"
		      />
		  </el-form-item>
	    </el-form>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogFormVisible = false">取消</el-button>
	        <el-button type="primary"  @click="save">
	          确定
	        </el-button>
	      </div>
	    </template>
	</el-dialog>
	  
	
	<!-- 确认删除框 -->
	 <el-dialog
	    v-model="dialogVisible1"
	    title="提示"
	    width="500"
	  >
	    <span>确定要删除该数据吗</span>
	    <template #footer>
			<div class="dialog-footer">
	        <el-button @click="dialogVisible1 = false">取消</el-button>
			<el-button type="primary" @click="sureDel">
				确定
	        </el-button>
			</div>
	    </template>
	  </el-dialog>
			
	<!-- 添加框 -->
	<el-dialog v-model="dialogFormVisible2" title="添加商品服务" width="500">
	    <el-form :model="formdata2" label-width="auto">
	      <el-form-item label="服务名称"  label-width="110">
	        <el-input v-model="formdata2.serviceName" autocomplete="off" show-word-limit maxlength="20" style="width: 250px;"/>
	      </el-form-item>
		  <el-form-item label="图片" label-width="110">
		  	<el-upload
				v-model="formdata2.serviceImage"
		  	    class="avatar-uploader"
		  	    :action="uploadUrl"
		  	    :show-file-list="false"
		  	    :on-success="handleAvatarSuccess"
		  	    :before-upload="beforeAvatarUpload"
		  	  >
		  	    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
		  	    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
		  	  </el-upload>
		  </el-form-item>
		  <el-form-item label="描述"  label-width="110">
		    <el-input
		        v-model="formdata2.serviceDescribe"
		        style="width: 250px"
		        :autosize="{ minRows: 2, maxRows: 4 }"
		        type="textarea"
		        placeholder="请输入描述"
				show-word-limit
				maxlength="200"
		      />
		  </el-form-item>
	    </el-form>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogFormVisible2 = false">取消</el-button>
	        <el-button type="primary"  @click="save2">
	          确定
	        </el-button>
	      </div>
	    </template>
	</el-dialog>
	  
</template>

<script setup>
	import {reactive,ref,onMounted} from 'vue';
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from "../stores/counter"
	import Header from "@/components/Header.vue"
	import {GoodsServiceList,UpdateGoodsService,InsertGoodsService,DeleteGoodsService} from "@/api"
	import { uploadUrl,baseUrl } from "@/utils/request";
	import { Plus} from '@element-plus/icons-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	let dialogFormVisible = ref(false)
	let dialogVisible1 = ref(false)
	let dialogFormVisible2 = ref(false)
	let route = useRoute();
	let router = useRouter();
	let counter = useCounterStore();
	counter.btns = route.meta.btns
	//获取商品服务列表
	let tableData = ref([])
	let pageIndex=ref(1);
	let pageSize=6;
	let total=ref(0)
	const goodsServiceList=async ()=>{
		let res=await GoodsServiceList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		// console.log("商品服务列表",res)
		tableData.value=res.serviceList
		total.value=res.pageCount
	}
	let form = reactive({
		serviceName:"",
		serviceDescribe:"",
		serviceImage:"",
		siteId:1
	})
	
	//搜索服务
	const search = async ()=>{
		// console.log(form.serviceName)
		let res1=await GoodsServiceList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			serviceName:form.serviceName,
			siteId:1
		})
		tableData.value=res1.serviceList
		// console.log("搜索",res1)
	}
	
	// 重置
	const clearContentFn=()=>{
		form.serviceName=""
		search()
	}
	
	let formdata = reactive({
	  serviceName: '',
	  serviceDescribe: "",
	  serviceImage:"",
	  siteId:1
	})
	
	let formdata2 = reactive({
	  serviceName: '',
	  serviceDescribe: "",
	  serviceImage:"",
	  siteId:1
	})
	//点击编辑
	const modify =(row)=>{
		dialogFormVisible.value= true
		// console.log("编辑商品服务",row)
		formdata = row
	}
	const rules = reactive({
		serviceName: [{
			required: true,
			message: '请输入优惠券名称',
			trigger: 'blur'
		}, ],
		serviceDescribe: [{
			required: true,
			message: '请输入优惠券名称',
			trigger: 'blur'
		}, ],
	})
	//点击编辑中的确定
	const save = async ()=>{
		let res2 = await UpdateGoodsService(formdata)
		dialogFormVisible.value= false
		// console.log("编辑确定",res2)
	}
	
	//点击添加中的确定
	const save2 = async ()=>{
		let res3 = await InsertGoodsService(formdata2)
		dialogFormVisible2.value= false
		search()
		// console.log("添加确定",res3)
		if(res3=="添加成功"){
			ElMessage.success(res3)
		}
	}
	
	//点击删除
	const del= (data)=>{
		dialogVisible1.value= true
		// console.log(data)
		sessionStorage.setItem("serviceId",data.serviceId)
	}
	//点击删除中的确定
	const sureDel=async ()=>{
		dialogVisible1.value= false
		let da =await DeleteGoodsService({"serviceId":Number(sessionStorage.getItem("serviceId"))})
		ElMessage.success(da)
		search()
		// console.log("删除确定",da)
	}
	
	//图片上传
	const imageUrl = ref('')
	
	const handleAvatarSuccess= (response,uploadFile) => {
		// console.log('上传成功',response)
	  imageUrl.value = URL.createObjectURL(uploadFile.raw)
	  //imageUrl.value=baseUrl+"manager/"+response.data
	  form.serviceImage=response.data
	}
	const beforeAvatarUpload= (rawFile) => {
		// console.log(rawFile)
		let reg=/(jpg|png|jpeg)$/
	  if (!reg.test(rawFile.type)) {
	    ElMessage.error('图片只能是jpg/jpeg/png格式的')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 4) {
	    ElMessage.error('图片的大小不能超过4MB')
	    return false
	  }
	  return true
	}
	
	//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		goodsServiceList()
	}
	
	onMounted(()=>{
		goodsServiceList()
	})
</script>

<style scoped lang="less">
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.el-input{
				width:200px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
			:deep(.el-table .el-table__cell){
				text-align: center !important;
			}
		}
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
	}
	
	
	.avatar-uploader .avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>